<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>table</title>
	</head>
	<script type="text/javascript">
		function add() { 
			var trObj = document.createElement("tr"); 
			trObj.id = new Date().getTime(); 
			trObj.innerHTML = "<td style='text-align: center;'>无</td><td style='text-align: center;'>无</td><td style='text-align: center;'>无</td><td style='text-align: center;'><input type='button' value='增加' onclick='add()'><input type='button' value='删除' onclick='del(this)'></td>";
			document.getElementById("tb").appendChild(trObj); 
		}
		function del(obj) {
		    var trId = obj.parentNode.parentNode.id; 
		    var trObj = document.getElementById(trId);
		    document.getElementById("tb").removeChild(trObj); 
    	}
	</script>
	<body>
		<table border="1" id="table">
			<tr>
				<th style="text-align: center;">学号</th>
				<th style="text-align: center;">姓名</th>
				<th style="text-align: center;">性别</th>
				<th style="text-align: center;">操作</th>
			</tr>
			<tbody id="tb">
				<tr id="1st">
					<td width="200px" align="center">1</td>
					<td width="200px" align="center">张扬</td>
					<td width="200px" align="center">男</td>
					<td width="200px" align="center"><input type="button" value="增加" onclick="add()"><input type="button" value="删除" onclick="del(this)"></td>
				</tr>
				<tr id="2st">
					<td width="200px" align="center">2</td>
					<td width="200px" align="center">张雪</td>
					<td width="200px" align="center">女</td>
					<td width="200px" align="center"><input type="button" value="增加" onclick="add()"><input type="button" value="删除" onclick="del(this)"></td>
				</tr>
				<tr id="3st">
					<td width="200px" align="center">3</td>
					<td width="200px" align="center">李刚</td>
					<td width="200px" align="center">男</td>
					<td width="200px" align="center"><input type="button" value="增加" onclick="add()"><input type="button" value="删除" onclick="del(this)"></td>
				</tr>
			</tbody>
		</table>
	</body>	
</html>


